<template>
  <div class="gopay" :style="height">
    <van-nav-bar left-text="确认订单" left-arrow class="title" @click-left="onClickLeft"></van-nav-bar>

<!-- 用户收货地址 -->
    <van-cell-group class="celgrop" >
      <div class="peops">
           <van-cell icon="location-o" is-link class="peop">
        <template #title>
          <div class="name">{{addresslist.name}}</div>
        </template>

        <div class="callnum">{{addresslist.tel}}</div>
      </van-cell>
      <van-cell class="peop">
        <div class="address">{{addresslist.address}}</div>
      </van-cell>
      </div>
    </van-cell-group>
   <!-- 商品展示 -->
   <div v-for="data in shopcarList " :key="data.goods_id" class="carde">
    <van-nav-bar>
      <template #left>
        {{data.mall_name}}
      </template>
    </van-nav-bar>
      <van-card
        class="cards"
        :num="data.numb"
        :price="data.normal_price/100"
        :title="data.short_name"
        :thumb="data.hd_thumb_url"
      />
    <van-cell-group class="celgrop">
      <van-cell title="配送方式" is-link value="快递免邮" />
      <van-cell title="运费险" is-link value="商家赠送，退换货可赔" />
      <van-cell title="开发票" is-link value="本次不具备开发票" />
      <van-cell title="订单备注" is-link value="和商家协商后的结果" />
     
      <van-cell  :value="(data.numb*(data.normal_price/100)).toFixed(2)" />
    </van-cell-group>
   </div>

     <van-cell-group class="butt">
      <van-cell title="购物愉快" is-link value="" />
    </van-cell-group>
     
    <!-- 弹出层 -->
    <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" closeable>
      <div class="poos">请恕臣妾做不到</div>
    </van-popup>
    <van-submit-bar
      class="van-hairline--top subclass"
      :price="sum*100"
      button-text="提交订单"
      @submit="showPopup"
    />
  </div>
</template>

<script>
import Vue from "vue";
import {
  NavBar,
  Toast,
  Icon,
  Cell,
  CellGroup,
  Card,
  SubmitBar,
  Popup,
} from "vant";
import http from "@/util/http";
import {mapState} from 'vuex'
Vue.use(NavBar);
Vue.use(Icon);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Card);
Vue.use(SubmitBar);
Vue.use(Popup);
export default {
  data() {
    return {
      height: {
        height: 0,
      },
      show: false,
      chosenAddressId: "1",
      addresslist: [],
      datalist: [],
    };
  },
  methods: {
    // 回退到购物车
    onClickLeft() {
      this.$router.push("/shopcar");
      Toast("返回");
    },
    // 设置加载高度
    setHeght() {
      this.height.height = window.innerHeight + "px";
    },
    // 弹框
    showPopup() {
      this.show = true;
    
    },
    // 获取用户地址
    getData() {
      http.get("userdress").then((res) => {
        console.log(res.data);
        this.addresslist = res.data;
      });
    },
  },
  computed: {
    // 获取选中购物车的商品，和计算结果
    ...mapState("shopCar",{
      shopcarList:state=>state.shopcarList,
      sum:state=>state.sum,

      }),
   
  },
  mounted() {
    this.setHeght();
    this.getData();

    console.log(this.shopcarList, this.sum,'nn')
  },
  updated() {
    this.setHeght();
  },
};
</script>

<style lang="scss" scoped>
.gopay {
  background: rgb(241, 236, 236);
  .title {
    color: rgb(97, 95, 95);
    background: #f2f2f2;
    height: 60px;
  }
  .celgrop {

    background: rgb(241, 236, 236);
      
  }
  .butt{
    margin-top: 3px;
    width: 97%;
    margin-left: 3px;
  }
  .title {
    background: white;
    margin-bottom: 13px;
  }
  .carde{
    margin-top:23px;
        width: 97%;
    margin-left: 5px;
  }
  .cards {
    background: white;
    margin-top:0 ;
  }
  .peop {
    background: whitesmoke;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 98%;
    margin-left: 3px;
    .address{
      white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    }
  }
    .peops{
      border-radius: 15px;
    }
  .callnum {
    flex: 1;
    float: left;
    text-align: left;
  }
  .subclass {
    margin-bottom: 4px;
  }
  .poos {
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
}
</style>